<include file="public@header" />
</head>
<body>
<div class="wrap">
    <form method="post" class="form-horizontal js-ajax-form margin-top-20" action="{:url('Wares/setGoodsAttrPost')}">

        <div id="form-item-box">
                <div class="form-group">
                    <label class="col-sm-2 control-label">属性</label>
                    <div class="col-md-6 col-sm-10">
                        <input type="text" class="form-control" name="attr[]">
                    </div>
                </div>

            <div class="form-group">
                <label class="col-sm-2 control-label"></label>

            </div>

            <input type="hidden" name="goods_id" value="{$goods_id}" />
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" onclick="addFormItem()" class="btn btn-default">增加表单项</button>
                <button type="submit" class="btn btn-primary js-ajax-submit">添加</button>
                <a class="btn btn-default" href="javascript:history.back(-1)">返回</a>
            </div>
        </div>
    </form>
</div>
<script src="__STATIC__/js/admin.js?v={$_static_version}"></script>
<script>
    function addFormItem() {
        // 获取大盒子
        const formItemBox = document.getElementById('form-item-box')

        // 创建input
        const input = document.createElement("input")
        input.type = 'text'
        input.className = 'form-control'
        input.name = 'attr[]'

        // 创建删除按钮
        const removeButton = document.createElement('button')
        removeButton.className = 'btn btn-danger btn-sm'
        removeButton.innerText = '移除'
        removeButton.type = 'button'
        removeButton.onclick = function (){
            removeFormItem(this)
        }

        // 创建input,button的父元素
        const inputParent = document.createElement("div")
        inputParent.className = 'col-md-6 col-sm-10'
        inputParent.style.display = 'flex'
        inputParent.appendChild(input)
        inputParent.appendChild(removeButton)

        // 创建label标签
        const label = document.createElement("label")
        label.className = 'col-sm-2 control-label'
        label.innerText = '属性'

        // 创建最外层的div
        const formGroupDiv = document.createElement("div")
        formGroupDiv.className = 'form-group'
        formGroupDiv.appendChild(label)
        formGroupDiv.appendChild(inputParent)
        formItemBox.appendChild(formGroupDiv)
    }

    // 移除表单项
    function removeFormItem(button) {
        // 获取大盒子
        const formItemBox = document.getElementById('form-item-box')
        formItemBox.removeChild(button.parentNode.parentNode)
    }
</script>
</body>
</html>